<template>
	<div>
		<h3>基础用法</h3>
			<at-radio-wall v-model="radio" label="1">备选项</at-radio-wall>
			<at-radio-wall v-model="radio" label="2">备选项</at-radio-wall>
			<at-radio-wall v-model="radio1" label="禁用">备选项</at-radio-wall>
			<at-radio-wall v-model="radio1" label="选中且禁用">备选项</at-radio-wall>
		<h3>单选框组</h3>
			<at-radio-group v-model="radio2">
				<at-radio-wall :label="3">备选项</at-radio-wall>
				<at-radio-wall :label="6">备选项</at-radio-wall>
				<at-radio-wall :label="9">备选项</at-radio-wall>
			</at-radio-group>
		<h3>按钮样式</h3>
			<div>
				<at-radio-group v-model="radio3">
					<at-radio-button label="上海"></at-radio-button>
					<at-radio-button label="北京"></at-radio-button>
					<at-radio-button label="广州"></at-radio-button>
					<at-radio-button label="深圳"></at-radio-button>
				</at-radio-group>
			</div>
			<div style="margin-top: 20px">
				<at-radio-group v-model="radio4" size="medium">
					<at-radio-button label="上海" ></at-radio-button>
					<at-radio-button label="北京"></at-radio-button>
					<at-radio-button label="广州"></at-radio-button>
					<at-radio-button label="深圳"></at-radio-button>
				</at-radio-group>
			</div>
			<div style="margin-top: 20px">
				<at-radio-group v-model="radio5" size="small">
					<at-radio-button label="上海"></at-radio-button>
					<at-radio-button label="北京" disabled ></at-radio-button>
					<at-radio-button label="广州"></at-radio-button>
					<at-radio-button label="深圳"></at-radio-button>
				</at-radio-group>
			</div>
			<div style="margin-top: 20px">
				<at-radio-group v-model="radio6" disabled size="mini">
					<at-radio-button label="上海"></at-radio-button>
					<at-radio-button label="北京"></at-radio-button>
					<at-radio-button label="广州"></at-radio-button>
					<at-radio-button label="深圳"></at-radio-button>
				</at-radio-group>
			</div>
		<h3>带有边框</h3>
			<div>
				<at-radio-wall v-model="radio7" label="1" border>备选项1</at-radio-wall>
				<at-radio-wall v-model="radio7" label="2" border>备选项2</at-radio-wall>
			</div>
			<div style="margin-top: 20px">
				<at-radio-wall v-model="radio8" label="1" border size="medium">备选项1</at-radio-wall>
				<at-radio-wall v-model="radio8" label="2" border size="medium">备选项2</at-radio-wall>
			</div>
			<div style="margin-top: 20px">
				<at-radio-group v-model="radio9" size="small">
					<at-radio-wall label="1" border>备选项1</at-radio-wall>
					<at-radio-wall label="2" border disabled>备选项2</at-radio-wall>
				</at-radio-group>
			</div>
			<div style="margin-top: 20px">
				<at-radio-group v-model="radio10" size="mini" disabled>
					<at-radio-wall label="1" border>备选项1</at-radio-wall>
					<at-radio-wall label="2" border>备选项2</at-radio-wall>
				</at-radio-group>
			</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				radio: '1',
				radio1: '选中且禁用',
				radio2: 3,
				radio3: '上海',
        		radio4: '上海',
        		radio5: '上海',
        		radio6: '上海',
        		radio7: '1',
				radio8: '1',
				radio9: '1',
				radio10: '1'

			}
		}
	}
</script>
<style>
</style>